<template>
  <div>
    <!-- pc端导航 -->
    <header>
      <div class="wrapper">
        <el-row>
          <el-col :span="4">
            <div class="logo threed">uol先森个人博客</div>
          </el-col>
          <el-col :span="20">
            <!-- 导航菜单 -->
            <el-menu mode="horizontal" :default-active="$route.path" @select="handleSelect" background-color="#2d2d2d"
              text-color="#9d9d9d" active-text-color="#fff" class="nav">
              <el-menu-item index="/" @click="goToto">
                <router-link to="/"><i class="iconfont My-new-iconshouye"></i>博客首页</router-link>
              </el-menu-item>
              <el-menu-item index="/Lists" @click="goToto">
                <router-link to="/Lists"><i class="iconfont My-new-iconzixun"></i>技术博文</router-link>
              </el-menu-item>
              <el-menu-item index="/timeLocus" @click="goToto">
                <router-link to="/timeLocus"><i class="iconfont My-new-icondaojishi"></i>时间轨迹</router-link>
              </el-menu-item>
              <el-menu-item index="/recommend" @click="goToto">
                <router-link to="/recommend"><i class="iconfont My-new-icondianzan"></i>学习路线</router-link>
              </el-menu-item>
              <el-menu-item index="/aboutMe" @click="goToto">
                <router-link to="/aboutMe"><i class="iconfont My-new-iconwode1"></i>关于我</router-link>
              </el-menu-item>

              <el-menu-item index="/article" @click="goToto">
                <router-link to="/article" v-if="isSignIn === 1 && nickname === 'MACH'"><i><svg t="1632790340485"
                      style="margin-top: -5px;" class="icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="1645" width="16" height="16">
                      <path
                        d="M301.3 496.7c-23.8 0-40.2-10.5-41.6-26.9H205c0.9 43.4 36.9 70.3 93.9 70.3 59.1 0 95-28.4 95-75.5 0-35.8-20-55.9-64.5-64.5l-29.1-5.6c-23.8-4.7-33.8-11.9-33.8-24.2 0-15 13.3-24.5 33.4-24.5 20.1 0 35.3 11.1 36.6 27h53c-0.9-41.7-37.5-70.3-90.3-70.3-54.4 0-89.7 28.9-89.7 73 0 35.5 21.2 58 62.5 65.8l29.7 5.9c25.8 5.2 35.6 11.9 35.6 24.4 0.1 14.7-14.5 25.1-36 25.1z"
                        p-id="1646" fill="#ffffff"></path>
                      <path
                        d="M928 140H96c-17.7 0-32 14.3-32 32v496c0 17.7 14.3 32 32 32h380v112H304c-8.8 0-16 7.2-16 16v48c0 4.4 3.6 8 8 8h432c4.4 0 8-3.6 8-8v-48c0-8.8-7.2-16-16-16H548V700h380c17.7 0 32-14.3 32-32V172c0-17.7-14.3-32-32-32z m-40 488H136V212h752v416z"
                        p-id="1647" fill="#ffffff"></path>
                      <path
                        d="M828.5 486.7h-95.8V308.5h-57.4V534h153.2z m-298.6 53.4c14.1 0 27.2-2 39.1-5.8l13.3 20.3h53.3L607.9 511c21.1-20 33-51.1 33-89.8 0-73.3-43.3-118.8-110.9-118.8s-111.2 45.3-111.2 118.8c-0.1 73.7 43 118.9 111.1 118.9z m0-190c31.6 0 52.7 27.7 52.7 71.1 0 16.7-3.6 30.6-10 40.5l-5.2-6.9h-48.8L542 491c-3.9 0.9-8 1.4-12.2 1.4-31.7 0-52.8-27.5-52.8-71.2 0.1-43.6 21.2-71.1 52.9-71.1z"
                        p-id="1648" fill="#ffffff"></path>
                    </svg></i>控制台</router-link>
              </el-menu-item>
              <el-menu-item index="/login" @click="goToto">
                <router-link to="/login" v-if="isSignIn === 0" class="login"><i
                    class="iconfont My-new-iconxuanzhonghaoyou"></i>登录</router-link>
              </el-menu-item>
              <el-menu-item index="/personal" @click="goToto">
                <router-link to="/personal" v-if="isSignIn === 1 " class="login">
                  {{UserInfo.nickname === 'MACH' ?
                  '尊敬的管理员：' + UserInfo.nickname : '尊敬的游客：'+ UserInfo.nickname}},欢迎您</router-link>
              </el-menu-item>
            </el-menu>
          </el-col>
        </el-row>
      </div>
    </header>
    <div id="mobileNav">
      <!-- 移动端导航 -->
      <el-row class="tac">
        <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
          background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" router>
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span class="logotit">uol个人博客</span>
              <span v-if="UserInfo.nickname">{{nickname}},欢迎您</span>
            </template>
<el-menu-item-group>
    <el-menu-item index="/" @click="Goto"><i class="iconfont My-new-iconshouye"></i>博客首页</el-menu-item>
    <el-menu-item index="/Lists" @click="Goto"><i class="iconfont My-new-iconzixun"></i>技术博文</el-menu-item>
    <el-menu-item index="/timeLocus" @click="Goto"><i class="iconfont My-new-icondaojishi"></i>时间轨迹
    </el-menu-item>
    <el-menu-item index="/recommend" @click="Goto"><i class="iconfont My-new-icondianzan"></i>博客推荐
    </el-menu-item>
    <el-menu-item index="/aboutMe" @click="Goto"><i class="iconfont My-new-iconwode1"></i>关于我</el-menu-item>
    <el-menu-item index="/personal" v-if="UserInfo.nickname" @click="Goto"><i class="iconfont My-new-iconwode1"></i>{{UserInfo.nickname}}的个人中心</el-menu-item>
    <el-menu-item index="/login" v-else @click="Goto">登录</el-menu-item>

</el-menu-item-group>
</el-submenu>
</el-menu>
</el-row>
</div>

</div>

</template>

<script>
    export default {
        data() {
            return {

                activeIndex: '1',
                UserInfo: {},

                nickname: ''
            }
        },
        methods: {
            // 修改当前活跃
            handleSelect(index) {
                this.activeIndex = index + ''
            },

            goToto() {
                console.log(11);
                this.$emit('goTo')
            },

            // 获取用户信息
            GetInfo() {
                console.log(window.sessionStorage.getItem('token'));
                this.$axios.get('/info').then((res) => {
                    console.log(res.data);
                    this.UserInfo = res.data.data
                    this.nickname = res.data.data.nickname
                    let avatar = res.data.data.head_img
                        //  获取用户昵称保存在 sessionStorage
                    sessionStorage.setItem("avatar", avatar);

                    sessionStorage.setItem("nickname", this.nickname);
                    //  console.log(this.UserInfo);
                })
            },
            // 移动端导航
            handleOpen(key, keyPath, index) {
                console.log(key, keyPath);
                console.log(index);
            },
            handleClose(key, keyPath, index) {
                console.log(key, keyPath);
                console.log(index);
            },
            Goto() {
                let but = document.querySelector('.el-submenu__title');
                but.click();
            }
        },
        computed: {
            isSignIn() {
                return this.$store.state.isSignIn;
            }
        },
        created() {

            this.GetInfo();
        }

    }
</script>

<style lang="less" scoped>
    .el-row {
        background-color: #2d2d2d
    }
    
    header {
        background-color: #2d2d2d;
        box-shadow: 1px 1px 1px 1px rgb(41, 40, 40);
        .logo {
            font-size: 18px;
            color: #fff;
            text-align: center;
            line-height: 60px;
        }
        .nav {
            float: right;
            li {
                padding: 0;
            }
            a {
                padding: 20px;
                .iconfont {
                    color: #fff;
                    // 垂直居中
                    vertical-align: top;
                    margin: 0 5px 0 0;
                }
            }
            .login {
                background: rgb(19, 167, 226);
                color: #fff;
            }
        }
    }
    
    i {
        margin-right: 8px;
    }
    
    .el-menu.el-menu--horizontal {
        border-bottom: 0
    }
</style>